<template>
  <div class="s-warp">
    <div :style="{fontSize: titleFontSize || 'var(--settingTitleFontSize)'}" class="s-title">{{title}}</div>
    <n-input
        :style="{height: height+'px' || 'auto', lineHeight: height+'px' || 'auto'}"
        :placeholder="placeholder"
        v-model:value="iptVal"
        @update:value="iptChange"
        :disabled="disabled"
        class="ipt"
    ></n-input>
  </div>
</template>

<script setup>
import { NInput } from 'naive-ui'
import { defineProps, defineEmits, ref } from 'vue'
let props = defineProps([
  'title',
  'titleFontSize',
  'placeholder',
  'modelValue',
  'disabled',
  'height'
])

let { title, placeholder, disabled, height } = props
let iptVal = ref(props.modelValue)

let emit = defineEmits(['update:modelValue'])
function iptChange(e) {
  emit('update:modelValue', e)
}
</script>

<style scoped>
@import "@/style/setting.css";

</style>
